<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专注工作助手</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav>
            <h1>专注工作助手</h1>
            <button id="themeToggle">切换主题</button>
        </nav>
    </header>

    <main class="container">
        <!-- 左侧任务列表 -->
        <section class="tasks-section">
            <div class="section-header">
                <h2>任务列表</h2>
                <button id="addTask">添加任务</button>
            </div>
            <div class="task-filters">
                <button class="active">今日</button>
                <button>本周</button>
                <button>长期</button>
            </div>
            <div class="tasks-list" id="tasksList">
                <!-- 任务将通过 JavaScript 动态添加 -->
            </div>
        </section>

        <!-- 中间番茄钟 -->
        <section class="pomodoro-section">
            <div class="timer-display">
                <h2>番茄钟</h2>
                <div class="timer" id="timer">25:00</div>
                <div class="timer-controls">
                    <button id="startTimer">开始</button>
                    <button id="pauseTimer">暂停</button>
                    <button id="resetTimer">重置</button>
                </div>
                <div class="timer-stats">
                    <span>今日完成：</span>
                    <span id="completedPomodoros">0</span>
                </div>
            </div>
        </section>

        <!-- 右侧白噪音 -->
        <section class="noise-section">
            <h2>白噪音</h2>
            <div class="sound-controls">
                <div class="sound-item">
                    <label>雨声</label>
                    <input type="range" min="0" max="100" value="0" class="volume-slider">
                    <button class="play-btn">播放</button>
                </div>
                <div class="sound-item">
                    <label>海浪</label>
                    <input type="range" min="0" max="100" value="0" class="volume-slider">
                    <button class="play-btn">播放</button>
                </div>
                <div class="sound-item">
                    <label>咖啡厅</label>
                    <input type="range" min="0" max="100" value="0" class="volume-slider">
                    <button class="play-btn">播放</button>
                </div>
            </div>
        </section>
    </main>

    <script src="js/main.js"></script>
</body>
</html>
